<template>
	<view class="my-fans">
		<z-paging ref="paging" v-model="dataList" @query="queryList">
			<view class="paging-fans">
				<view class="fans" v-for="(item,i) in dataList" :key="i">
					<view class="head" @click="toPage(item.userId)">
						<image :src="item.avatar" mode=""></image>
					</view>
					<view class="text-css">
						<view class="text">
							<text>{{item.username}}</text>
						</view>
						<view class="follow" v-if="!item.isMutual" @click="followClick(item,true,i)">
							<text>+ 关注</text>
						</view>
						<view class="unfollow" v-else @click="followClickUnfollow(item,false,i)">
							<text>已关注</text>
						</view>
					</view>
				</view>
			</view>
			<Popup :title="popupName" ref="popupRef" @reserved="reserved"></Popup>
		</z-paging>
	</view>
</template>
<script>
	import {
		userFansListApi
	} from "../../api/index.js"
	import {
		userChangeRelation
	} from "../../api/user.js"
	import Popup from './common/popup.vue'
	export default {
		components: {
			Popup
		},
		data() {
			return {
				popupName: '',
				popupItem: {},
				dataList: []
			}
		},
		methods: {
			//关注或不关注方法
			async followClick(item,follow,index) {
				try{
					const res = await userChangeRelation({
						beFollowId: item.userId,
						following: follow,
					})
					
					uni.showToast({
						title:follow ? '关注成功' : '取关成功',
						icon:'none'
					})
					console.log(index)
					console.log(this.dataList[index])
					console.log(this.dataList[index].isMutual)
					this.dataList[index].isMutual = follow
					console.log(this.dataList[index])
					this.popupItem = null
					this.$refs.popupRef.close()
				}catch(e){
					console.log(e)
					uni.showToast({
						title:e.message || e.data,
						icon:'none'
					})
				}
			},
			reserved() {
				this.followClick(this.popupItem.data,this.popupItem.follow,this.popupItem.index)
			},
			followClickUnfollow(item,follow,index){
				
				this.popupName = '确定不关注' + item.username + '吗？'
				this.$refs.popupRef.open()
				this.popupItem = {
					data:{
						userId:item.userId,
					},
					follow:follow,
					index:index,
				}
				
			},
			//下拉刷新,上拉加载
			async queryList(pageNo, pageSize) {
				try {
					const res = await userFansListApi({
						pageNum: pageNo,
						pageSize: pageSize + 5,
					})
					this.$refs.paging.complete(res.data);
				} catch (e) {
					// 如果请求失败
					this.$refs.paging.complete(false) //展示错误页面
				}
			},
			toPage(id) {
				uni.navigateTo({
					url: `../community/userInfo?userId=${id}`
				})
			}
		},
	}
</script>
<style lang="scss" scoped>
	.paging-fans {
		padding: 60rpx 40rpx 0;
	}
	.my-fans {
		.fans {
			display: flex;
			margin-bottom: 40rpx;
			justify-content: space-between;
			.head {
				position: relative;
				&>image {
					width: 80rpx;
					height: 80rpx;
					border-radius: 50%;
				}
			}
			.text-css {
				padding-left: 22rpx;
				display: flex;
				width: calc(100% - 102rpx);
				justify-content: space-between;
				align-items: center;
				font-size: 24rpx;
				.text {
					height: 26rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #000000;
					width: calc(100% - 145rpx);
					align-items: center;
					display: flex;
					text:first-child {
						max-width: calc(100% - 160rpx);
						text-overflow: ellipsis;
						overflow: hidden;
						white-space: nowrap;
						display: inline-block;
					}
					text:last-child {
						color: #4F4F4F;
						padding-left: 18rpx;
					}
				}
				.follow {
					width: 145rpx;
					height: 60rpx;
					line-height: 60rpx;
					text-align: center;
					border: 2rpx solid #333333;
					border-radius: 30rpx;
				}
				.unfollow {
					width: 145rpx;
					height: 60rpx;
					line-height: 60rpx;
					text-align: center;
					border: 2rpx solid #F7F7F7;
					border-radius: 30rpx;
					background: #F7F7F7;
					color: #B2B4B5;
				}
			}
		}
	}
</style>